<template>
  <div class="tableHeader">
    <el-row v-show="data.company">
      <el-col :span="11"
        ><div class="grid-content bg-purple textLeft">
          {{ data.company || "" }}
        </div></el-col
      >
      <el-col :span="13"
        ><div class="grid-content bg-purple-light textRight">
          编号：{{ data.code || "" }}
        </div></el-col
      >
    </el-row>
    <el-row v-show="data.mainTitle">
      <el-col :span="24"
        ><div class="grid-content bg-purple-dark mainTitle">
          {{ data.mainTitle || "" }}
        </div></el-col
      >
    </el-row>
    <el-row v-show="data.subTitle">
      <el-col :span="24"
        ><div class="grid-content bg-purple-dark mainTitle">
          {{ data.subTitle || "" }}
        </div></el-col
      >
    </el-row>
    <el-row justify="end" type="flex" v-show="data.date">
      <el-col :span="12"
        ><div class="grid-content bg-purple-light textRight">
          {{ data.date || "" }}
        </div></el-col
      >
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object | Function | Array,
      default: () => {
        return {};
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.tableHeader {
  width: 100%;
  border-left: 1px solid rgba(31, 179, 255, 0.2);
  border-right: 1px solid rgba(31, 179, 255, 0.2);
  .el-row {
    padding: 8px 20px;
    color: #ffffff;
    // background: rgba(9, 34, 79, 0.22);
    border-bottom: 1px solid rgba(31, 179, 255, 0.2);
    font-size: 14px;
    .textLeft {
      text-align: left;
    }
    .textRight {
      text-align: right;
    }
    .mainTitle{
      font-size: 20px;
      font-weight: bold;
      text-align: center;
    }
    .subTitle {
        text-align: center;
      font-weight: 100;
    }
  }
}
@media screen and (max-width: 520px) {
  .tableHeader {
    .el-row {
      padding: 8px 5px;
      font-size: 10px;
    }
  }
}
</style>>